import { useState, useEffect } from "react";
import { Col, Form, Row, Space } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { SimpleTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import { getSalesLockList } from "../service";

const LockInModal = ({ visible, handleCancel, record }) => {
	const [form] = Form.useForm();
	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);
	const [totalNum, setTotalNum] = useState(0);

	const tableRequest = getSalesLockList;

	const onOk = () => {
		onCancel();
	};

	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const columns = [
		{
			name: "序号",
			code: "index",
			render: (t, r, i) => i + 1,
			width: 60
		},
		{
			name: "出库单号",
			code: "outboundNo"
		},
		{
			name: "销售锁定数",
			code: "lockedNum"
		}
	];
	const tableKey = "LockInModal3213";
	const {
		selectedKeys,
		selectedRows,
		fetchList,
		dataSource,
		query,
		pagination,
		updateDataSource,
		updateSearchQuery,
		updatePaginationParams,
		searchSimpleTableProps
	} = useTableConfig({
		tableKey,
		rowKey: "id",
		columns,
		tableRequest,
		autoFetch: true,
		hasPagination: true,
		hasQuickSearch: true,
		beforeQuerySearch: ({ API_DATA }) => {
			return {
				...API_DATA,
				skuId: record.skuId,
				warehouseId: record.warehouseId
			};
		},
		resetSourceData: false,
		hasColsSetting: true
	});
	useEffect(() => {
		const totalAmount = dataSource.reduce((accumulator, currentValue) => {
			return accumulator + currentValue.lockedNum;
		}, 0);
		setTotalNum(totalAmount);
	}, [dataSource]);
	return (
		<CommonModal
			title={{ title: "销售锁定数" }}
			className="views-table-dialog"
			visible={true}
			onOk={onOk}
			onCancel={onCancel}
			minHeight="150px"
		>
			<Form name="mark-unuaual-modal">
				<Row>
					<Col span={12}>
						<Form.Item label="销售锁定数：" name="timeOutType">
							<div>{totalNum}</div>
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item label="锁定订单数：" name="timeOutType">
							<div>{dataSource.length}</div>
						</Form.Item>
					</Col>
				</Row>
				<SimpleTable key={tableKey} {...searchSimpleTableProps} />
			</Form>
		</CommonModal>
	);
};

export default LockInModal;
